<!--
 * @Description: 帮我决定
 * @Author: ZhangHan
 * @Date: 2025-09-05 14:55:51
 * @LastEditTime: 2025-09-16 08:50:50
 * @LastEditors: ZhangHan
-->
<template>
  <view class="designpage">
    <uni-section title="帮我决定" type="line">
      <view class="uni-px-5 uni-pb-5">
        <uni-data-checkbox
          v-model="checkValue"
          :localdata="doList"
        ></uni-data-checkbox>
      </view>
    </uni-section>
    <view style="height: 20rpx" />
    <uni-easyinput
      v-if="checkValue === 0"
      type="textarea"
      v-model="eatValue"
      placeholder="请输入内容"
    ></uni-easyinput>
    <uni-easyinput
      v-else
      type="textarea"
      v-model="doValue"
      placeholder="请输入内容"
    ></uni-easyinput>
    <view class="result" v-if="resultText">{{ resultText }}</view>
    <view class="action-group">
      <view class="doinfo" @tap="handleDesign">帮我决定</view>
      <view class="clear" @tap="handleClear">清除</view>
    </view>
    <uni-section title="提示，输入的文本请用逗号隔开" type="line"></uni-section>
    <uni-section
      title="选择困难症患者的福音！由我来帮你决定，可自定义决定内容，随机选择决定"
      type="line"
    ></uni-section>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { getRandomIndex } from "@/utils/common";

const checkValue = ref(0);
const resultText = ref<string | undefined>("");
const eatValue = ref(
  "沙县,烧腊,小炒肉,兰州拉面,汤饭,黄焖鸡,卤肉饭,蛋炒饭,羊肉粉,螺蛳粉,猪脚饭,白切鸡,肯德基,火锅,烧烤,泡面,西北风,煎饼果子"
);
const doValue = ref(
  "电影,听音乐,游戏,逛街,看电视,睡觉,吃饭,清洁,锻炼,学习,发呆,散步,购物,回家,唱歌"
);

let timer: any = null;

const doList = [
  {
    text: "干什么",
    value: 0,
  },
  {
    text: "吃什么",
    value: 1,
  },
];

//点击决定
const handleDesign = () => {

  const eatList = eatValue.value.replace(/\s+/g, "，");
  const doList = doValue.value.replace(/\s+/g, "，");
  const arr =
    checkValue.value === 0
      ? eatList.split(",")
      : doList.split(",");

  if (arr.length > 1) {
    const index = getRandomIndex(arr);
    resultText.value = arr[index];
    timer = setInterval(() => {
      const index = getRandomIndex(arr);
      resultText.value = arr[index];
    }, 100);

    setTimeout(() => {
      clearInterval(timer);
    }, 100 * 22);
  } else {
    resultText.value = arr[0];
    uni.showToast({
      title:'请输入内容',
      icon: 'error',
      mask: true,
      duration:1000
    })
  }
};

//清空
const handleClear = () => {
  resultText.value = undefined;
  if (checkValue.value === 0) {
    eatValue.value = "";
  } else {
    doValue.value = "";
  }
};
</script>

<style lang="scss" scoped>
@mixin btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 30rpx;
  border-radius: 20rpx;
}

.designpage {
  background: white;
  box-sizing: border-box;
  padding: 0 32rpx;
}

.mb {
  margin-bottom: 20rpx;
}

.result {
  margin-top: 20rpx;
  font-size: 42rpx;
  font-weight: bold;
}

.action-group {
  margin-top: 20rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  .doinfo {
    @include btn();
    background: #409eff;
    color: white;
    margin-right: 20rpx;
    &:active {
      opacity: 0.9;
    }
  }
  .doinfo:active {
    opacity: 0.5 !important;
  }
  .clear {
    @include btn();
    border: 2rpx solid #dcdfe6;
    &:focus {
      opacity: 0.9;
    }
  }
}
</style>
